<template>
    <view class="publish">
        <textarea class="publish-input" v-model="form.Content" :maxlength="maxlength" :placeholder="$t('home.pub_tips')"
                  @input="actInput"/>
        <view class="publish-images" v-if="!showUploadList">
            <template v-for="(item, index) in fileList">
                <view class="publish-images_item" :data-index="index" @click.stop="actPreviewImage">
                    <view @click.stop="deleteItem(index)">
                        <u-icon width="42" height="42" name="close-circle-fill" color="#fa3534" size="42"></u-icon>
                    </view>
                    <u-image width="118rpx" height="118rpx" :src="item.url" mode="aspectFill"
                             border-radius="10"></u-image>
                </view>
            </template>

            <!-- 视频 -->
            <view class="uni-uploader__file" v-if="src != ''">
                <view class="uploader_video" @click="actVideoPlay">
                    <view @click.stop="delectVideo()" class="close-icon">
                        <u-icon width="46" height="46" name="close-circle-fill" color="#fa3534" size="46"></u-icon>
                    </view>
                    <image
                        class="uploader_video_play--icon"
                        src="/static/images/home/play.png"
                        mode="scaleToFill"
                    />
                    <u-image width="118rpx" height="118rpx" class="article-video_img" mode="widthFix"
                             :src="VodImg+'?imageMogr2/crop/118x118/gravity/center'" v-if="!isPlay"></u-image>
                </view>
                <video id="video" :src="src" class="video" :autoplay="autoplay" @fullscreenchange="fullscreenchange"
                       v-show="isPlay"></video>
            </view>

        </view>
        <view class="publish-form">
            <view class="publish-form_item u-flex">
                <text class="publish-form_item--symbol">*</text>
                <u-input v-model="form.AreaCode" type="number" :placeholder="$t('home.area_code')" :border="true"/>
                <u-input v-model="form.Mobile" type="number" :placeholder="$t('home.link_tel')" :border="true"/>
            </view>
            <view class="publish-form_item u-flex">
                <text class="publish-form_item--symbol">*</text>
                <u-input v-model="form.Company" type="text" :placeholder="$t('home.link_corp')" :border="true"/>
            </view>
            <view class="publish-form_item u-flex">
                <text class="publish-form_item--symbol"></text>
                <u-input v-model="form.Dept" type="text" :placeholder="$t('home.user_pos')" :border="true"/>
            </view>
        </view>
        <view class="publish-handle">
            <view class="publish-handle_content u-flex u-row-between">
                <view class="publish-handle_left u-flex">
                    <u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action"
                              :formData="formData">
                       <template v-slot:addBtn class="u-flex" hover-class="slot-btn__hover" hover-stay-time="150">
                       		<text class="icon icon-tupian1" style="color: #464747"></text>
                       </template>	
                    </u-upload>
                    <view class="publish-handle_left--item" @click="actChooseVideo">
                        <text class="icon icon-shipin"></text>
                    </view>
                </view>
                <view class="publish-handle_right">{{ curlength }}/{{ maxlength }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
import { toRaw } from 'vue';
export default {
  mixins: [pageMixin],
    data() {
        return {
            inputStyle: {
                padding: '30rpx'
            },
            form: {
                Mobile: '',
                Company: '',
                Dept: ''
            },

            formData: {
                catalog: 'cms',
            },
            action: '', // 演示地址
            showUploadList: false,
            // 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
            // 这里直接获取内部的lists变量即可
            fileList: [],
            maxlength: 1024,
            curlength: 0,
            src: "",		//临时视频存放
            VodSrc: "",	//线上视频地址
            VodImg: "",
            isPlay: false,
            autoplay: false,
            videoContext: null,
        }
    },

    onLoad() {
		uni.setNavigationBarTitle({
			 title:this.$t('home.pub_demand'),
			 //text:this.$t('home')['btn_publish'],
		 });
		//  uni.setTitleNViewButtonStyle(1,{"text":"11"})
		//  this.$mp.page.$getAppWebview().setTitleNViewButtonStyle(0,{text:"xxx"});
		//  var webView = this.$mp.page.$getAppWebview();    
		   
		//      webView.setTitleNViewButtonStyle(0, {    
		//           text: '\ue68b',    
		//  });
		//   const currentWebview =  this.$parent.$scope.$getAppWebview();
		//   currentWebview.setTitleNViewButtonStyle(0,{text:"11"})
		// uni.setTitleNViewButtonStyle();
        this.init();
    },
    onShow() {
    },
    // 只有onReady生命周期才能调用refs操作组件
    onReady() {
        this.$store.commit('checkUserLogin');
        // 得到整个组件对象，内部图片列表变量为"lists"
        this.fileList = this.$refs.uUpload.lists;
    },
    mounted: function () {
        this.videoContext = uni.createVideoContext('video', this);
    },
		onNavigationBarButtonTap(e) {
		    if (e.type == 'close') {
		        this.$u.route({
		            type: 'back',
		            delta: 1
		        });
		        return;
		    }
		    this.submit();
		},
    components: {},
    computed: {
        i18n() {
            return this.$t('home')
        }
    },
    methods: {
        init() {
            this.action = this.$store.state.fileUploadUrl;
            this.formData = {catalog: 'cms'};
		      	this.$store.commit('checkUserLogin');
			      this.getInfo();
        },
        getInfo() {
			      var uid = this.$store.state.vuex_user.uid || 0;
			      if (uid > 0) {
				    this.$http.get('/client/user/account/info', {}).then(res => {
				    this.form.Mobile = res.Mobile;
				    this.form.Company = res.Corp;
				    this.form.Dept = res.Post;
				    this.form.AreaCode = res.AreaCode;
				});
			}
        },
        actPreviewImage(e) {
            let index = e.currentTarget.dataset.index;
            let urls = [];
            toRaw(this.fileList).forEach(function (item) {
                urls = urls.concat(item.url);
            });
            // 预览图片
            uni.previewImage({
                urls: urls,
                current: index,
                indicator: 'default',
                longPressActions: {
                    itemList: ['发送给朋友', '保存图片', '收藏'],
                    success: function (data) {
                        // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                    },
                    fail: function (err) {
                        // console.log(err.errMsg);
                    }
                }
            });
        },
        deleteItem(index) {
            this.$refs.uUpload.remove(index);
        },
        actChooseVideo() {
            let that = this;
            if (that.src != '') {
                uni.showToast({
                    title: this.$t('home.most_one_video'),
                    icon: 'none'
                });
                return;
            }

            // 上传视频
            uni.chooseVideo({
                maxDuration: 60,
                count: 1,
                camera: 'back',
                sourceType: ['camera', 'album'],
                success: (res) => {
                    uni.showLoading();
                    uni.uploadFile({
                        url: that.action, //上传接口地址
                        filePath: res.tempFilePath,
                        name: 'file',
                        formData: {
                            catalog: 'cms'
                        },
                        success: (uploadFileRes) => {
                            var result = JSON.parse(uploadFileRes.data);
                            that.VodSrc = result.data.filepath;
                            that.src = res.tempFilePath;
                            var arr = that.VodSrc.split('.');
                            that.VodImg = result.data.domain + arr[0] + '_0.jpg';
                          
                            // 按实际上传的视频回调地址显示
                            // that.src = result.data.domain+result.data.filepath;
                            uni.hideLoading();
                        },
                        complete: res => {
                            uni.hideLoading();
                        }
                    });
                }
            })
        },
        delectVideo: function () {
            uni.showModal({
                title: this.$t('home.tip'),
                content: this.$t('home.del_video'),
                success: (res) => {
                    if (res.confirm) {
                        this.src = '';
                        this.VodSrc = '';
                        this.VodImg = '';
                    }
                }
            })
        },
        actVideoPlay() {
            this.isPlay = true;
            this.videoContext.requestFullScreen({direction: '0'});
            this.autoplay = true;
        },
        fullscreenchange(e) {
            if (!e.detail.fullScreen) {
                this.isPlay = false;
            }
        },
        submit() {
            let that = this;
            if (this.form.AreaCode == '' || this.form.AreaCode == undefined) {
                uni.showToast({
                    title: this.$t('home.area_code'),
                    icon: 'none'
                });
                return;
            }
            if (this.form.Mobile == '' || this.form.Mobile == undefined) {
                uni.showToast({
                    title: this.$t('home.link_tel'),
                    icon: 'none'
                });
                return;
            }
            if (this.form.Company == '' || this.form.Company == undefined) {
                uni.showToast({
                    title: this.$t('home.link_corp'),
                    icon: 'none'
                });
                return;
            }
            let imgPack = [];
            toRaw(this.fileList).forEach(function (item) {
                imgPack.push({
                    src: item.response.data.filepath,
                });
            });
            if (this.form.Content == '' || this.form.Content == undefined && imgPack.length == 0 && this.VodSrc == '') {
                uni.showToast({
                    title: this.$t('home.search_tips'),
                    icon: 'none'
                });
                return;
            }
            this.form.imgPack = JSON.stringify(imgPack);
            this.form.VodSrc = that.VodSrc;
            this.$http.post('/mgr/biz/demand/save', this.form, this.$store.state.jHeader).then(res => {
                uni.showToast({
                    title: this.$t('home.pub_success'),
                });
                setTimeout(function () {
                    uni.$u.route({
                        type: 'back',
                        delta: 1
                    });
                }, 1000);
            });
        },
        actInput(e) {
            this.curlength = e.detail.cursor;
            if (this.curlength >= this.maxlength) {
                uni.showToast({
                    title: this.$t('home.max_length'),
                    icon: 'none'
                });
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.publish {
    // height: 54vh;
    // background-color: #fff;
    // overflow:hidden;
    // &-input{
    // 	padding: 30rpx;
    // 	width: 100%;
    // 	height: 100%;
    // 	// overflow-y: auto;
    // }
    min-height: 100vh;
    background-color: #fff;

    &-input {
        padding: 30rpx;
        width: 100%;
    }
}

.uploader_video {
    position: relative;
    width: 118rpx;
    height: 118rpx;
    border-radius: 10rpx;
    overflow: hidden;

    .close-icon {
        z-index: 999;
        position: absolute;
        top: 4rpx;
        right: 4rpx;

        .u-icon {
            background: #FFFFFF ;
            border-radius: 100%;
        }
    }

    &_play--icon {
        width: 36rpx;
        height: 36rpx;
        z-index: 999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        background: #505050;
    }
}

.publish-images {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    clear: both;
    overflow: hidden;

    &_item {
        position: relative;
        margin: 10rpx;
        float: left;

        .u-icon {
            z-index: 999;
            position: absolute;
            top: 6rpx;
            right: 6rpx;
            background-color: #FFFFFF;
            border-radius: 42px;
        }
    }
}

.publish-form {
    z-index: 9999;
    position: fixed;
    bottom: 120rpx;
    width: 100%;
    background-color: #fff;

    &_item {
        margin: 28rpx 35rpx 10rpx 30rpx;
        // margin-bottom: 28rpx;
        &--symbol {
            width: 25rpx;
            color: #DA0606;
        }
    }
}

.publish-handle {
    z-index: 999;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #f1f1f1;

    &_content {
        padding: 20rpx 30rpx;
    }

    &_left {
        font-size: 48rpx;
        color: #777777;

        &--item {
            padding: 0 40rpx;
        }

        .icon {
            font-size: 48rpx;
            // margin-right: 20rpx;
        }
    }

    &_right {
        color: #999999;
    }
}
</style>
